<template>
	<view class="home">
		<view class="fix">
			<top-status></top-status>
			<view class="tabs wap">
				<view class="city" @click="toback">
					<uni-icons type="back" size="28" color="#333"></uni-icons>
				</view>
				<image class="img2">
					<view class="tab1" :class="{'tab4':tabInd == 0}" @click="tabInd =0">最新活动</view>
					<view class="tab1" :class="{'tab4':tabInd == 1}" @click="tabInd =1">我的活动</view>
			</view>
		</view>
		<view v-if="tabInd == 0" class="">
			<view class="cont" v-for="(l,i) in party_list" :key="i"
				v-if="Array.isArray(party_list) && party_list.length > 0">
				
				<block v-if="l.ActType=='每周挑战'">
					<!-- <view class="act_type">
						{{l.ActType}}
					</view> -->
					<view class="winner" v-if="l.WinnerID">
						<image :src="l.WinnerImg" mode="aspectFill" />
						<view class="winner_flag">获胜者</view>
					</view>
					<image :src="l.Banner" mode="aspectFill" @click="gosubject(l.ID)"></image>
					<view class="cont_vip">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/hykf.png" mode=""
							v-if="l.UserType!=null">
						</image>
						<view class="vip_text" v-if="l.UserType!=null">{{l.UserType}}</view>
					</view>
					<view class="cont_title">
						{{l.Title}}
					</view>
					<view class="cont_lines"></view>
					<view class="cont_time">
						<image src="../../static/img/icon_time@2x.png" mode=""></image>
						<text>活动时间：{{ formatDate(l.StartDate) }}~{{ formatDate(l.EndDate) }}</text>
					</view>
					<view class="cont_time" style="bottom: 420rpx;">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710310227266557.png" mode=""></image>
						<text>雪遇朋友圈每周挑战</text>
						<!-- <text style="margin-left: 135rpx;">距您 58km</text> -->
					</view>
					<view class="cont_btm">
						<view class="btm_left">
							<view class="cont_head" v-if="l.Communities.length<=10">
								<image v-for="(item, index) in l.Communities" :key="index" :src="item.HeadImgUrl"
									mode="aspectFill"></image>
							</view>
							<view class="cont_head" v-else>
								<image v-for="(item, index) in l.Communities.slice(0,10)" :key="index"
									:src="item.HeadImgUrl" mode="aspectFill"></image>
							</view>
							<uni-icons type="person" color="#fff" size="30"></uni-icons>
							<text>{{l.Communities.length}}</text>
						</view>
						<!-- <view class="btm_right">
						我要参加
					</view> -->
					</view>

				</block>
				<block v-else>
					<image :src="l.Banner" mode="aspectFill" @click="goparty(l.ID)"></image>
					<view class="cont_vip">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/hykf.png" mode=""
							v-if="l.UserType!=null">
						</image>
						<view class="vip_text" v-if="l.UserType!=null">{{l.UserType}}</view>
					</view>
					<view class="cont_title">
						{{l.Title}}
					</view>
					<view class="cont_lines"></view>
					<view class="cont_time">
						<image src="../../static/img/icon_time@2x.png" mode=""></image>
						<text>活动时间：{{ formatDate(l.StartDate) }}~{{ formatDate1(l.EndDate) }}</text>
					</view>
					<view class="cont_time" style="bottom: 420rpx;">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710310227266557.png" mode=""></image>
						<text>{{l.Address}}</text>
						<!-- <text style="margin-left: 135rpx;">距您 58km</text> -->
					</view>
					<view class="cont_btm">
						<view class="btm_left">
							<view class="cont_head" v-if="l.Users.length<=10">
								<image v-for="(item, index) in l.Users" :key="index" :src="item.HeadImgUrl"
									mode="aspectFill"></image>
							</view>
							<view class="cont_head" v-else>
								<image v-for="(item, index) in l.Users.slice(0,10)" :key="index" :src="item.HeadImgUrl"
									mode="aspectFill"></image>
							</view>
							<uni-icons type="person" color="#fff" size="30"></uni-icons>
							<text>{{l.Users.length}}</text>
						</view>
						<!-- <view class="btm_right">
						我要参加
					</view> -->
					</view>
				
				</block>
			</view>
			<view class="" v-else>
				<u-empty mode="list" width="64" height="64"
					icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true"
					iconSize="32" text="暂无动态"></u-empty>
			</view>
		</view>
		<view v-if="tabInd == 1" class="">
			<view class="cont" v-for="(l,i) in myparty_list" :key="i" v-if="Array.isArray(myparty_list) && myparty_list.length > 0">
				<image :src="l.Banner" mode="aspectFill" @click="goparty(l.ID)"></image>
				<view class="cont_vip">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/hykf.png" mode=""
						v-if="l.UserType!=null">
					</image>
					<view class="vip_text" v-if="l.UserType!=null">{{l.UserType}}</view>
				</view>
				<view class="cont_title">
					{{l.Title}}
				</view>
				<view class="cont_lines"></view>
				<view class="cont_time">
					<image src="../../static/img/icon_time@2x.png" mode=""></image>
					<text>活动时间：{{ formatDate(l.StartDate) }}~{{ formatDate1(l.EndDate) }}</text>
				</view>
				<view class="cont_time" style="bottom: 420rpx;">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710310227266557.png" mode=""></image>
					<text>{{l.Address}}</text>
					<!-- <text style="margin-left: 135rpx;">距您 58km</text> -->
				</view>
				<view class="cont_btm">
					<view class="btm_left">
						<view class="cont_head">
							<image v-for="(item, index) in l.Users" :key="index" :src="item.HeadImgUrl"
								mode="aspectFill"></image>
						</view>
						<uni-icons style="margin-left: 40rpx;" type="person" color="#fff" size="30"></uni-icons>
						<text>{{l.Users.length}}</text>
					</view>

				</view>
			</view>
			<view class="" v-else>
				<view>暂无动态</view>
				<u-empty mode="list" width="64" height="64"
					icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true"
					iconSize="32" text="暂无动态"></u-empty>
			</view>

		</view>

	</view>
</template>

<script>
	import topStatus from "@/components/topStatus/topStatus.vue";
	export default {
		data() {
			return {
				tabInd: 0,
				party_list: [],
				maxImages: 3,
				myparty_list: [],
				token: ''
			}
		},
		components: {
			topStatus
		},
		onLoad() {
			this.get_partylist()
			this.get_mylist()
			this.token = uni.getStorageSync('xj_token')
			console.log(this.token, '====用户id');
		},
		computed: {
			formatDate() {
				return (date1) => {
					const date = new Date(date1);
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const hours = date.getHours();
					const minutes = date.getMinutes();
					return `${month}/${day} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
				};
			},
			formatDate1() {
				return (date1) => {
					const date = new Date(date1);
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const hours = date.getHours();
					const minutes = date.getMinutes();
					return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
				}
			}
		},
		methods: {
			async get_partylist() {
				let res = await this.$api.post('/Action/List')
				this.party_list = res.data
			},
			async get_mylist() {
				let res = await this.$api.post('/Action/My', {
					// token:this.token
				})
				console.log('我的活动列表', res);
				this.myparty_list = res.data
			},
			toback() {
				uni.navigateBack({
					delta: 1
				});
			},
			goparty(id) {
				uni.navigateTo({
					url: `/pages/dynamic/activity_details?id=${id}`
				});
			},
			gosubject(id) {
				uni.navigateTo({
					url: `/pages/dynamic/subject?id=${id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.home {
		position: relative;
	}

	.fix {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		width: 750rpx;
		background-color: #fff;
	}

	.tabs {
		box-sizing: border-box;
		z-index: 200;
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
		background: #fff;

		.img2 {
			height: 36rpx;
			width: 36rpx;
			margin-right: 66rpx;
		}

		.tab1 {
			font-size: 32rpx;
			margin-right: 52rpx;
			line-height: 44px;
		}

		.tab4 {
			font-weight: bold;
			color: #333;
			position: relative;
			
			&::before {
				position: absolute;
				left: 50%;
				bottom: 4rpx;
				transform: translate(-50%,-50%);
				display: block;
				content: "";
				width: 50%;
				height: 8rpx;
				background: #333;
				border-radius: 16rpx;
			}
		}
	}

	.cont {
		width: 750rpx;
		height: 460rpx;
		margin-top: 20rpx;
		background-color: #333;
		image {
			width: 750rpx;
			height: 460rpx;
			opacity: 0.6;
		}
		
		.act_type{
			position: absolute;
			top:20rpx;
			left: 10rpx;
			display: flex;
			font-weight: bold;
			font-size: 42rpx;
		}

		.winner {
			position: absolute;
			right: 0rpx;
			display: flex;


			.winner_flag {
				background-color: #ff42ab;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				display: flex;
				position: absolute;
				z-index: 100;
				width: 100%;
			}

			image {
				width: 200rpx;
				height: 275rpx;
				opacity: 1;
				z-index: 99;
			}
		}

		.cont_vip {
			width: 56rpx;
			height: 156rpx;
			position: relative;
			bottom: 468rpx;
			left: 654rpx;

			image {
				width: 56rpx;
				height: 156rpx;
				opacity: 1;
			}

			.vip_text {
				font-size: 24rpx;
				color: #4C310C;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: justify;
				writing-mode: vertical-rl;
				position: relative;
				bottom: 166rpx;
				width: 56rpx;
				height: 156rpx;
			}
		}

		.cont_title {
			font-size: 44rpx;
			color: #FFFFFF;
			position: relative;
			bottom: 460rpx;
			left: 40rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			width: 600rpx;
		}

		.cont_lines {
			width: 100rpx;
			height: 2rpx;
			background: linear-gradient(270deg, #B98B51 0%, #FEF0BC 100%);
			border-radius: 1rpx;
			position: relative;
			bottom: 440rpx;
			left: 40rpx;
		}

		.cont_time {
			display: flex;
			align-items: center;
			position: relative;
			bottom: 430rpx;
			left: 40rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				opacity: 1;
			}

			text {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.cont_btm {
			position: relative;
			bottom: 390rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btm_left {
				display: flex;
				align-items: center;
				width: 100%;

				.cont_head {
					width: 100%;

					image {
						width: 72rpx;
						height: 72rpx;
						border: #D6C6AB 2rpx solid;
						border-radius: 100rpx;
						opacity: 1;
						margin-right: -25rpx;
						position: relative;
					}
				}

				text {
					font-size: 36rpx;
					color: #fff;
				}
			}

			.btm_right {
				width: 192rpx;
				height: 72rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #4C310C;

			}
		}
	}

	.ball-create-wrap {
		position: fixed;
		left: 0;
		bottom: 82rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		.ball-create {
			image {
				width: 100%;
				height: 100%;
			}

			width: 90rpx;
			height: 90rpx;
			background-color: white;
			border-radius: 50%;

			display: flex;
			color: black;
			justify-content: center;
			align-items: center;
			font-size: 46rpx;
		}
	}
</style>